import React, { useState } from 'react'
//useState让函数式组件支持state状态
//usestate()方法里面唯一的参数就是初始state
//usestate返回一个只有两个元素的数组
//第一个元素是当前的state的值,
//第二个元素是一个函数,用来替换原来state的值,这个函数的修改state和setState一样是异步的
//React会在重复渲染时记住当前state的值并提供最新的值给我们的函数

export default function App() {
  const [count, setCount] = useState(0)
  const [isHot,setIsHot] = useState(true)
//这样声明相当于是声明了一个变量,要加一个const
// console.log('count', count)
  const setCountHandle = () => {
    setCount(count+1)
    console.log('count', count)
  }
  

  const setIsHotHandle = ()=>{
    setIsHot(!isHot)
  }
  return (
    <div>
      <div>累加的值是{count}</div>
      <button onClick={setCountHandle}>点击累加</button>
      <div>今天的天气真的{isHot?'热啊':'冷啊'}</div>
      <button onClick={setIsHotHandle}>点击修改</button>

    </div>
  )
}

//useState()方法接受一个参数就是初始的state
//useState方法返回一个只有两个参数的数组,
//数组的第一个参数就是当前的state,第二个值就是一个函数,用来替换当前的state,这个函数的修改state和setState一样是异步的
//React在重新渲染时会记住当前的state的值,并给函数返回一个最新的state